<template>
  <Layout>

    <div class="container">
      <div class="hero">
        <h1 class="hero-title">Simplicity. Aesthetics. Value.</h1>
        <h2 class="hero-subtitle">
          Hi there, I'm an independent Digital Designer &amp; Art Director
          focused on digital design for brands that like to have fun.
        </h2>
      </div>
      <div data-v-50cbff3e class="projects">
        <div data-v-50cbff3e class="project">
          <a
            data-v-50cbff3e
            href="/projects/chelsea-landmark/"
            class="project-link"
            >
            <img
              data-v-50cbff3e
              alt="Banana"
              src="../assets/img/mike-dorner-173502-unsplash.f11e5e1.16e7958f24c375d7bd7b08073b4ce000.jpg"
              width="2560"
              data-src="../assets/img/mike-dorner-173502-unsplash.f11e5e1.16e7958f24c375d7bd7b08073b4ce000.jpg"
              data-srcset="../assets/img/mike-dorner-173502-unsplash.f11e5e1.16e7958f24c375d7bd7b08073b4ce000.jpg"
              data-sizes="(max-width: 2560px) 100vw, 2560px"
              class="thumbnail g-image g-image--lazy g-image--loaded"
              srcset="
                ../assets/img/mike-dorner-173502-unsplash.f11e5e1.16e7958f24c375d7bd7b08073b4ce000.jpg,
              "
              sizes="(max-width: 2560px) 100vw, 2560px"
            /><noscript data-v-50cbff3e
              ><img
                src="../assets/img/mike-dorner-173502-unsplash.f11e5e1.16e7958f24c375d7bd7b08073b4ce000.jpg"
                class="thumbnail g-image g-image--loaded"
                width="2560"
                alt="Banana"
            /></noscript>
            <h3 data-v-50cbff3e class="project-title">Banana</h3>
            <div data-v-50cbff3e class="categories">
              <span data-v-50cbff3e class="category">photography</span
              ><span data-v-50cbff3e class="category">pink</span>
            </div></a
          >
        </div>
        <div data-v-50cbff3e class="project">
          <a data-v-50cbff3e href="/projects/sunk/" class="project-link"
            ><img
              data-v-50cbff3e
              alt="Pineapple"
              src="../assets/img/cody-davis-253925-unsplash.f11e5e1.ce547449449f5efa1a8b8f02c7abb04d.jpg"
              width="2560"
              data-src="../assets/img/cody-davis-253925-unsplash.f11e5e1.ce547449449f5efa1a8b8f02c7abb04d.jpg"
              data-srcset="../assets/img/cody-davis-253925-unsplash.f11e5e1.ce547449449f5efa1a8b8f02c7abb04d.jpg"
              data-sizes="(max-width: 2560px) 100vw, 2560px"
              class="thumbnail g-image g-image--lazy g-image--loaded"
              srcset="
                ../assets/img/cody-davis-253925-unsplash.f11e5e1.ce547449449f5efa1a8b8f02c7abb04d.jpg
              "
              sizes="(max-width: 2560px) 100vw, 2560px"
            /><noscript data-v-50cbff3e
              ><img
                src="../assets/img/cody-davis-253925-unsplash.f11e5e1.ce547449449f5efa1a8b8f02c7abb04d.jpg"
                class="thumbnail g-image g-image--loaded"
                width="2560"
                alt="Pineapple"
            /></noscript>
            <h3 data-v-50cbff3e class="project-title">Pineapple</h3>
            <div data-v-50cbff3e class="categories">
              <span data-v-50cbff3e class="category">photography</span
              ><span data-v-50cbff3e class="category">blue</span>
            </div></a
          >
        </div>
        <div data-v-50cbff3e class="project">
          <a data-v-50cbff3e href="/projects/3d-graff/" class="project-link"
            ><img
              data-v-50cbff3e
              alt="Ice Cream"
              src="../assets/img/ian-dooley-281897-unsplash.f11e5e1.4ee4f858cbb8392c2cc4019598c07dcd.jpg"
              width="2560"
              data-src="../assets/img/ian-dooley-281897-unsplash.f11e5e1.4ee4f858cbb8392c2cc4019598c07dcd.jpg"
              data-srcset="../assets/img/ian-dooley-281897-unsplash.f11e5e1.4ee4f858cbb8392c2cc4019598c07dcd.jpg"
              data-sizes="(max-width: 2560px) 100vw, 2560px"
              class="thumbnail g-image g-image--lazy g-image--loaded"
              srcset="
                ../assets/img/ian-dooley-281897-unsplash.f11e5e1.4ee4f858cbb8392c2cc4019598c07dcd.jpg
              "
              sizes="(max-width: 2560px) 100vw, 2560px"
            /><noscript data-v-50cbff3e
              ><img
                src="../assets/img/ian-dooley-281897-unsplash.f11e5e1.4ee4f858cbb8392c2cc4019598c07dcd.jpg"
                class="thumbnail g-image g-image--loaded"
                width="2560"
                alt="Ice Cream"
            /></noscript>
            <h3 data-v-50cbff3e class="project-title">Ice Cream</h3>
            <div data-v-50cbff3e class="categories">
              <span data-v-50cbff3e class="category">photography</span
              ><span data-v-50cbff3e class="category">yellow</span>
            </div></a
          >
        </div>
        <div data-v-50cbff3e class="project">
          <a
            data-v-50cbff3e
            href="/projects/ios-concept/"
            class="project-link"
            ><img
              data-v-50cbff3e
              alt="Porta400"
              src="../assets/img/markus-spiske-516263-unsplash.f11e5e1.5fc4651133067e67284df56f3d81be2d.jpg"
              width="2560"
              data-src="../assets/img/markus-spiske-516263-unsplash.f11e5e1.5fc4651133067e67284df56f3d81be2d.jpg"
              data-srcset="../assets/img/markus-spiske-516263-unsplash.f11e5e1.5fc4651133067e67284df56f3d81be2d.jpg"
              data-sizes="(max-width: 2560px) 100vw, 2560px"
              class="thumbnail g-image g-image--lazy g-image--loaded"
              srcset="
                ../assets/img/markus-spiske-516263-unsplash.f11e5e1.5fc4651133067e67284df56f3d81be2d.jpg
              "
              sizes="(max-width: 2560px) 100vw, 2560px"
            /><noscript data-v-50cbff3e
              ><img
                src="../assets/img/markus-spiske-516263-unsplash.f11e5e1.5fc4651133067e67284df56f3d81be2d.jpg"
                class="thumbnail g-image g-image--loaded"
                width="2560"
                alt="Porta400"
            /></noscript>
            <h3 data-v-50cbff3e class="project-title">Porta400</h3>
            <div data-v-50cbff3e class="categories">
              <span data-v-50cbff3e class="category">photography</span
              ><span data-v-50cbff3e class="category">yellow</span>
            </div></a
          >
        </div>
      </div>
    </div>

    <div data-v-460714ac>
      <div data-v-460714ac class="latest-journals-heading container">
        <span data-v-460714ac class="label">Latest and greatest</span>
      </div>
      <div data-v-460714ac class="latest-journals">
        <div data-v-460714ac class="container">
          <a
            data-v-460714ac
            href="/journal/gridsome-forestry-cms/"
            class="journal"
            ><h3 data-v-460714ac class="journal-title">
              Gridsome with Forestry CMS
            </h3></a
          ><a
            data-v-460714ac
            href="/journal/use-gridsome-vuejs/"
            class="journal"
            ><h3 data-v-460714ac class="journal-title">
              VueJS for your next project
            </h3></a
          ><a
            data-v-460714ac
            href="/journal/macos-development-environment/"
            class="journal"
            ><h3 data-v-460714ac class="journal-title">
              macOS development environment
            </h3></a
          ><a
            data-v-460714ac
            href="/journal/a-journal-entry/"
            class="journal"
            ><h3 data-v-460714ac class="journal-title">
              About Typography
            </h3></a
          >
        </div>
      </div>
    </div>

  </Layout>
</template>

<script>
export default {
  metaInfo: {
    title: 'Hello, world!'
  }
}
</script>

<style>
.home-links a {
  margin-right: 1rem;
}
</style>
